<template>
    <div class="btm">
        <div class="title">
            <div class="gj">中国</div>
            {{ heightData }}
            <div class="tl">
                <div class="item" :style="{ background: item.color + '80' }" v-for="item in colorList" :key="item.color">
                    <div class="color" :style="{ background: item.color }"></div>
                    <div class="text">{{ item.label }}</div>
                </div>
            </div>
        </div>
        <div class="line">
            <div id="line" ref="chart" :style="{ width: '100%', height: heightData }"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, watch } from "vue";
const props = defineProps(['ganntData'])
let myEcharts = echarts;
const chart = ref(null);
const chartUtil = ref(null);
onMounted(() => {
    initChart();

});
onUnmounted(() => {
    myEcharts.dispose;
});
watch(props, (newVal, oldVal) => {
    console.log('33---------', props.ganntData);
    heightData.value = ((30 * props.ganntData.length) + 10) + 'px';
    chart.value.style.height = heightData.value;
    initChart();
})
const colorList = [
    {
        label: "通信与数据链",
        color: '#d96d00'
    },
    {
        label: "预警探测",
        color: '#30d9c4'
    },
    {
        label: "导航定位",
        color: '#385dae'
    },
    {
        label: "战场情报侦察",
        color: '#578166'
    },
    {
        label: "火控制导",
        color: '#8c0000'
    },
    {
        label: "敌我识别",
        color: '#00a6b6'
    }
]
let data = [
    {
        list: [
            {
                colorNum: 0,
                endTime: 30000,
                item: "item1",
                quantity: 10,
                startTime: 9000,

            },
            {
                colorNum: 1,
                endTime: 6000,
                item: "item2",
                quantity: 492,
                startTime: 200,
            },
            {
                colorNum: 2,
                endTime: 60,
                item: "item3",
                quantity: 20837,
                startTime: 30,
            },
            {
                colorNum: 3,
                endTime: 9999,
                item: "item4",
                quantity: 3620,
                startTime: 66,
            },
            {
                colorNum: 4,
                endTime: 999999,
                item: "item5",
                quantity: 7200,
                startTime: 14355,
            },
        ],
        plant: "飞机",
    },
    {
        list: [
            {
                colorNum: 0,
                endTime: 30000,
                item: "item1",
                quantity: 10,
                startTime: 9000,
            },
            {
                colorNum: 1,
                endTime: 6000,
                item: "item2",
                quantity: 492,
                startTime: 200,
            },
            {
                colorNum: 2,
                endTime: 60,
                item: "item3",
                quantity: 20837,
                startTime: 30,
            },
            {
                colorNum: 3,
                endTime: 9999,
                item: "item4",
                quantity: 3620,
                startTime: 66,
            },
            {
                colorNum: 0,
                endTime: 999999,
                item: "item5",
                quantity: 7200,
                startTime: 14355,
            },
        ],
        plant: "舰船",
    }
];

const heightData = ref(((30 * props.ganntData.length) + 10) + 'px');

function initChart() {
    chartUtil.value = myEcharts.init(chart.value, "purple-passion");

    console.log("????????", heightData.value);
    let seriesData = [];
    let yAxisData_plant = []; //工厂名
    props.ganntData.forEach((item, index) => {
        yAxisData_plant.push(item.plant);
        let bgColor;
        if (item.list) {
            item.list.forEach((listItem, listIndex) => {
                switch (listItem.colorNum) {
                    case 0:
                        bgColor = "#d96d00";
                        break;
                    case 1:
                        bgColor = "#30d9c4";
                        break;
                    case 2:
                        bgColor = "#385dae";
                        break;
                    case 3:
                        bgColor = "#578166";
                        break;
                    case 4:
                        bgColor = "#8c0000";
                        break;
                    default:
                        bgColor = "#00a6b6";
                }
                let startTime = new Date(listItem.startTime).getTime();
                let endTime = new Date(listItem.endTime).getTime();
                seriesData.push({
                    name: listItem.item,
                    value: [index, startTime, endTime,],
                    itemStyle: {
                        normal: {
                            color: bgColor,
                        },
                    },
                });
            });
        }
    });
    let option = {
        // backgroundColor: "#26263C",  //背景颜色
        tooltip: {
            position: function (point, params, dom, rect, size) {

                // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                // 提示框位置
                var x = 0; // x坐标位置
                var y = 0; // y坐标位置

                // 当前鼠标位置
                var pointX = point[0];
                var pointY = point[1];

                // 外层div大小
                // var viewWidth = size.viewSize[0];
                // var viewHeight = size.viewSize[1];

                // 提示框大小
                var boxWidth = size.contentSize[0];
                var boxHeight = size.contentSize[1];
                // boxWidth > pointX 说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                    x = 5;
                } else { // 左边放的下
                    x = pointX - boxWidth;
                }

                // boxHeight > pointY 说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                    y = 5;
                } else { // 上边放得下
                    y = pointY - boxHeight;
                }

                return [x, y];
            },

            formatter: function (params) {
                // console.log('111111111', params)
                return params.marker + params.name + ' : ' + params.value[1] + 'MHz - ' + params.value[2] + 'MHz';
            },
        },
        //     dataZoom: [
        //     {
        //       type: 'slider',
        //       show: true,
        //       // 设置组件控制的y轴
        //       yAxisIndex: 0,
        //     //   left: '99%',    
        //       // top: 60,
        //       // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
        //       // 也可以用 startValue设置起始值
        //       start: 0,
        //       end: 36,
        //       width: 8,
        //       // height: 450,
        //       // 组件的背景颜色
        //       // left: 600, //左边的距离
        //       right: 8,//右边的距离
        //       borderRadius: 5,
        //       borderColor: "rgba(43,48,67,0.8)",
        //       fillerColor: '#269cdb',//滑动块的颜色
        //       backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
        //       // 是否显示detail，即拖拽时候显示详细数值信息
        //       showDetail: false,
        //       // 控制手柄的尺寸
        //       handleSize: 16,
        //       // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
        //       showDataShadow: false,
        //     },
        //     {
        //       type: 'inside',
        //       yAxisIndex: [0],
        //       start: 1,
        //       // end: 36,
        //       // 不按任何功能键，鼠标滚轮能触发缩放
        //       zoomOnMouseWheel: false,
        //       // 不按任何功能键，鼠标移动能触发数据窗口平移
        //       moveOnMouseWheel: true
        //     }
        //   ],
        grid: {
            top: 10,
            left: 30,
            right: 50,
            bottom: 5,
            height: 30 * props.ganntData.length,
            containLabel: true
        },
        xAxis: {
            type: "log",
            splitLine: {
                show: true,
                lineStyle: { color: "rgba(233,233,233,0.1)" },
            },
            axisLine: {
                onZero: false,
                show: true,
            },

        },
        yAxis: {
            axisTick: {
                show: false
            },
            axisLine: {
                onZero: true,
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: { color: "#000000", fontSize: 12 },
                fontSize: 14,
                formatter: function (value, index, utils) {
                    let val = [];
                    props.ganntData.forEach(item => {
                        if (item.plant === value) {
                            if (item.list) {
                                val.push(value)
                            } else {
                                let text = value + '           ';
                                val.push(text)
                            }

                        }
                    })
                    return val[0]
                }
            },
            splitLine: {
                show: true,
                lineStyle: { color: "rgba(233,233,233,0.1)" },
            },
            inverse: true,
            data: yAxisData_plant,
        },
        series: [
            {
                type: "custom",
                renderItem: function (params, api) {
                    console.log('331---', params, api);
                    var categoryIndex = api.value(0);
                    var start = api.coord([api.value(1), categoryIndex]);
                    var end = api.coord([api.value(2), categoryIndex]);
                    // var height = 100;
                    var rectShape = echarts.graphic.clipRectByRect(
                        {
                            x: start[0],
                            y: start[1] - 5,
                            width: end[0] - start[0],
                            height: 10,
                        },
                        {
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height,
                        }
                    );

                    return (
                        rectShape && {
                            type: "rect",
                            shape: rectShape,
                            style: api.style(),
                        }
                    );
                },
                encode: {
                    x: [1, 2],
                    y: 0,
                },
                data: seriesData,
            },
        ],
    };


    // 使用刚指定的配置项和数据显示图表。
    chartUtil.value.setOption(option);
    setTimeout(() => {
        chartUtil.value.resize();
    })
    window.onresize = function () {
        chartUtil.value.resize();
    };
}

</script>

<style lang="scss" scoped>
.line {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
}

.btm {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;

    .title {
        display: flex;
        justify-content: space-between;
        padding-right: 50px;

        .tl {
            display: flex;

            .item {
                display: flex;
                align-items: center;
                padding: 5px 15px;
                margin-left: 10px;

                .color {
                    width: 20px;
                    height: 20px;
                    border-radius: 5px;
                }

                .text {
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>
